<script setup>
import utils from "../../assets/js/utils.js";
import { reactive, ref } from "@vue/reactivity";
import { Swiper, SwiperSlide } from "swiper/vue";
import * as swiperAni from "../../assets/js/animate";
import "swiper/css";
import { useRouter } from 'vue-router'

let data = reactive({
  setp: [
    {
      title: "Let's start\nyour <span style='color:#ffa183'>Vacation!</span>",
      url: "http://rftl72o75.hn-bkt.clouddn.com/setp2.png",
    },
    {
      title: "Explore the\n<span style='color:#ffa183'>earth</span> with us",
      url: "http://rftl72o75.hn-bkt.clouddn.com/setp1.png",
    },
    {
      title: "A new way\nto <span style='color:#ffa183'>Travel</span>",
      url: "http://rftl72o75.hn-bkt.clouddn.com/setp3.png",
    },
  ],
  //swiper的下标
  swiper_index: 0,
});
 const router = useRouter()


const onSwiper = (swiper) => {
  swiperAni.swiperAnimateCache(swiper); //隐藏动画元素
  swiperAni.swiperAnimate(swiper); //初始化完成开始动画
};
const onSlideChange = (e) => {
  data.swiper_index = e.activeIndex;
  swiperAni.swiperAnimate(e);
};
// 跳转页面
const on_to_login = (e) => {
  utils.ripples_animation(e)
  router.push({ path: '/login' })
};
</script>

<template>
  <div class="aa">
    <swiper
      :slides-per-view="1"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
      :allowSlideNext="!(data.swiper_index == data.setp.length - 1)"
      :allowSlidePrev="!data.swiper_index == 0"
    >
      <swiper-slide v-for="(item, index) in data.setp" :key="index">
        <div class="setp-box">
          <img class="setp-background" :src="item.url" />
          <span
            class="setp-title ani"
            v-html="item.title"
            swiper-animate-effect="fadeInUp"
            swiper-animate-duration="1s"
            swiper-animate-delay="0s"
          ></span>
          <div
            class="setp-btn"
            v-show="index == data.setp.length - 1"
            @click="on_to_login"
          >
            进入
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>


<style lang="scss">
@import "../../assets/css/animate.min.css";
@import "../../assets/css/utils.scss";
.setp-box {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: #5b4ebb;
  .setp-background {
    width: 100vw;
    height: calc(100vh - 154px);
    display: flex;
    position: absolute;
    bottom: 0;
  }

  .setp-btn {
    width: 180px;
    height: 50px;
    background-color: #fcc2d7;
    color: #ffffff;
    position: absolute;
    bottom: 86px;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: Poppins-Bold-, Poppins-Bold;
    overflow: hidden;
  }
  .setp-title {
    width: 100%;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    font-family: Poppins-Bold-, Poppins-Bold;
    font-weight: normal;
    font-size: 30px;
    color: #ffffff;
    margin: auto;
    white-space: pre-wrap;
    text-align: center;
  }

  .setp-title-animation {
    animation: setp-title 1s;
  }

  .setp-btn-animation {
    position: absolute;
    background-color: red;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: animate 0.5s linear infinite;
    border-radius: 100%;
    opacity: 0.5;
  }

  @keyframes animate {
    0% {
      width: 0px;
      height: 0px;
    }

    100% {
      width: 200px;
      height: 200px;
    }
  }
}
</style>
